<template>
  <el-header class="navbar">
    <div class="nav-container">
      <div class="nav-brand">
        <router-link to="/" class="brand-link">
          <el-icon><House /></el-icon>
          <span>民宿预定平台</span>
        </router-link>
      </div>

      <div class="nav-search">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索目的地、房源名称"
            class="search-input"
            @keyup.enter="handleSearch"
            clearable
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>

      <div class="nav-menu">
        <el-menu
            mode="horizontal"
            :default-active="activeIndex"
            class="nav-menu-list"
            :ellipsis="false"
        >
          <el-menu-item index="1" @click="$router.push('/')">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="2" @click="$router.push('/search')">
            <el-icon><Compass /></el-icon>
            <span>探索</span>
          </el-menu-item>

          <!-- 登录/注册链接 -->
          <el-menu-item index="6" @click="$router.push('/login')" v-if="!userStore.isLoggedIn">
            <el-icon><User /></el-icon>
            <span>登录/注册</span>
          </el-menu-item>

          <!-- 用户信息下拉菜单 -->
          <el-sub-menu index="7" v-else>
            <template #title>
              <div class="user-avatar-container">
                <el-avatar :size="30" :src="userStore.userInfo?.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=User'">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span class="username">{{ userStore.username }}</span>
              </div>
            </template>
            <el-menu-item @click="$router.push('/profile')">
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item @click="$router.push('/orders')">
              <el-icon><List /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item @click="$router.push('/favorites')">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item @click="handleLogout" divided>
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '../stores/user'
import { House, Search, Compass, List, Star, User, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const searchKeyword = ref('')

// 计算属性，用于动态高亮当前页面的导航项
const activeIndex = computed(() => {
  const path = route.path;
  if (path === '/') return '1';
  if (path.startsWith('/search')) return '2';
  if (path.startsWith('/login')) return '6';
  // 对于用户菜单下的页面，不设置高亮主导航
  if (['/profile', '/orders', '/favorites'].some(p => path.startsWith(p))) {
    return null; // 或者返回一个不匹配任何 index 的值
  }
  return '1'; // 默认高亮首页
})

// 处理搜索
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { keyword: searchKeyword.value }
    })
  } else {
    ElMessage.warning('请输入搜索关键词');
  }
}

// 处理登出
const handleLogout = () => {
  ElMessageBox.confirm('您确定要退出登录吗？', '退出确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用 store 中正确的登出 action
    userStore.logoutAction()
    ElMessage.success('您已成功退出登录')
    // 登出后跳转到首页
    router.push('/')
  }).catch(() => {
    // 用户点击取消
    ElMessage.info('已取消操作')
  })
}
</script>

<style scoped>
.navbar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 0;
  height: 64px; /* 调整为更常见的高度 */
  line-height: 64px;
  position: sticky; /* 使导航栏固定在顶部 */
  top: 0;
  z-index: 1000;
  width: 100%;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.nav-brand {
  margin-right: 40px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.brand-link:hover {
  color: #409eff;
}

.brand-link .el-icon {
  margin-right: 8px;
  font-size: 24px;
}

.nav-search {
  flex: 1;
  max-width: 400px;
  margin-right: auto; /* 将搜索框推到中间 */
}

.search-input {
  width: 100%;
}

.nav-menu {
  flex-shrink: 0;
}

.nav-menu-list {
  border-bottom: none;
  background: transparent;
  display: flex;
  align-items: center;
}

.nav-menu-list .el-menu-item,
.nav-menu-list .el-sub-menu {
  height: 64px;
  line-height: 64px;
  border-bottom: none !important; /* 强制移除底边框 */
  color: #606266;
}

.nav-menu-list .el-menu-item:hover,
.nav-menu-list .el-sub-menu .el-sub-menu__title:hover {
  background-color: transparent !important; /* 移除悬停背景色 */
  color: #409eff;
}

.nav-menu-list .el-menu-item.is-active {
  color: #409eff;
  border-bottom: 2px solid #409eff !important; /* 高亮下划线 */
}

.el-sub-menu.is-active .el-sub-menu__title {
  border-bottom-color: transparent !important;
}

.user-avatar-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
}

.user-avatar-container:hover .username {
  color: #409eff;
}

.username {
  margin-left: 8px;
  font-weight: 500;
  transition: color 0.2s;
}

/* 统一菜单项图标和文字的间距 */
.el-menu-item .el-icon,
.el-dropdown-menu__item .el-icon {
  margin-right: 8px;
}
</style>